<template lang="pug">
el-dialog(title="关联商品" :visible.sync="goodslist" :before-close="close" append-to-body)
    el-form(v-model="f")
        el-form-item
            el-button(type="primary" style="margin-right:30%;" @click="savechange") 保存
            el-input(style="width:12%;margin-left:3%;margin-right:3%;" placeholder="商品名称" v-model="sname")
            el-select(v-model="value" style="width:12%;margin-right:3%;" placeholder="请选择")
                el-option(v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value")
            el-select(v-model="value1" style="width:12%" placeholder="请选择")
                el-option(label="全部分类" value="-1")
                el-option(v-for="item in options2"
                :key="item.gcId"
                :label="item.gcName"
                :value="item.gcId")
            el-button(type="primary" icon="el-icon-search" style="margin-left:3%" @click="search") 查询
    el-row.listrow(:span="24")
        el-row(v-for="item in td" :key="item.gcId")
            el-col.listcol(:span="24")
                span {{item.gcName}}
            el-col(:span="24")
                    el-checkbox.checkboxs(border v-for="tt in item.child" :key="tt.goodsId" @change="setitem(tt)" v-model="tt.checked" size="small") {{tt.name}}
</template>
<script>
    export default{
        data(){
            return{
                goodslist:false,
                sname:'',
                sgid:'',
                td:[],
                f:{},
                gds:[],
                count:0,
                currentPage:1,
                selection:[],
                loading:false,
                checked:false,
                checked2:false,
                options:[{
                    value: -1,
                    label: '全部状态'
                },{
                    value: 1,
                    label: '上架'
                },{
                    value: 0,
                    label: '下架'
                }],
                options2:[],
                value:-1,
                value1:'-1'
            }
        },
        computed:{
            getstate(){
                return this.$store.state.goodslistclass;
            },
            getchange(){
                return this.$store.state.goodslist;
            }
        },
        watch:{
            getstate(v){
                this.value=-1
                this.value1='-1'
                this.sname=''
                var _this=this
                this.getgoodkind(function(){
                    _this.getData()
                })
                this.gds=[]
                this.goodslist=v
            },
            getchange(v){
                console.log(v)

            }
        },
        methods:{
            close(){
                // this.gds=[]
                this.$store.state.goodslistclass=false
            },
            search(){//搜索
                if(this.sname==''&&this.value==-1&&this.value1==-1){
                    this.getData()
                    return
                }
                var pa=new URLSearchParams()
                if(this.sname){
                    pa.append('name',this.sname)
                }
                if(this.value!=-1){
                    pa.append('status',this.value)
                }
                if(this.value1!=-1){
                    pa.append('cateId',this.value1)
                }
                this.getData(pa)
            },
            getgoodkind(f){//获取分类
                var _this=this//options2
                this.options2=[]
                axios.get('/listXcxGoodsClass.do').then(r=>{
                    if(r.data.code==200){
                        _this.options2=[].concat(r.data.response.xcxGoodsClassList)
                        f()
                    }else{
                        _this.$message.error(r.data.message)
                    }
                })
            },
            setitem(r){
                var arrlist=[].concat(this.td)
                this.td=[]
                this.td=[].concat(arrlist)
            },
            getData(v){//获取数据,并对数据结构进行操作,增减checked
                var _this=this
                axios.get('/xcxGoodsListName.do',{params:v}).then(r=>{
                    if(r.data.code==200){
                        _this.td=[]
                        var goodarr=[].concat(r.data.response.xcxGoodsList)
                        var kindarr=[]
                        for(var i=0;i<_this.options2.length;i++){
                            _this.options2[i].child=[]
                            kindarr.push(_this.options2[i])
                        }
                        // console.log("2",_this.td,goodarr,kindarr)
                        //遍历商品
                        //添加checked
                        //遍历分类
                        //如果当前商品的cateId==分类的id
                        //将商品push到分类下的child里
                        for(var i=0;i<goodarr.length;i++){
                            goodarr[i].checked=false
                            for(var j=0;j<kindarr.length;j++){
                                if(goodarr[i].cateId==kindarr[j].gcId){
                                    kindarr[j].child.push(goodarr[i])
                                }
                            }
                        }
                        _this.td=[].concat(kindarr)
                        // console.log(_this.td)
                    }else{
                        _this.$message.error(r.data.message)
                    }
                })
            },
            savechange(){//获取被选中的数据,提交到父组件
                // console.log("this.selection",this.selection)
                var selection=[]
                for(var i=0;i<this.td.length;i++){
                    if(this.td[i].child){
                        for(var j=0;j<this.td[i].child.length;j++){
                            if(this.td[i].child[j].checked){
                                selection.push(this.td[i].child[j])
                            }
                        }
                    } 
                }
                this.$emit("getgoodsid",selection)
                this.goodslist=false
                this.close()
            }
        }
    }
</script>
<style scoped>
.listrow{
    height: 500px;
    overflow:auto;
}
.listcol{
    background-color: #E5EAEE;
    padding: 5px;
    padding-left: 20px;
}
.checkboxs{
    margin:10px;
}
</style>

